<template>
  <scroll-view scroll-y class="container" @scrolltolower="handleNextPage">
    <nav-bar title="设备管理" class="nav-bar" />
    <view v-if="list.length > 0">
      <view class="card" v-for="item in list" :key="item.id">
        <view class="top">
          <view class="lef">
            <view class="row name">{{ item.equipName }}</view>
            <view class="row">sn号：{{ item.equipSn }}</view>
            <view class="row">所属门店：{{ item.shopName || "" }}</view>
          </view>
          <!--          <view class="rig">-->
          <!--            <view class="img"-->
          <!--              ><image-->
          <!--                src="../../../../static/images/tabbar/home_active.png"-->
          <!--                mode=""-->
          <!--              ></image-->
          <!--            ></view>-->
          <!--          </view>-->
        </view>
        <!--        <u-line :margin="'30rpx 0'"></u-line>-->
        <view class="btm">
          <view class="time">绑定时间：{{ item.bindTime }}</view>
          <view @click="jumpEquiEdit(item)" class="set">打印设置</view>
        </view>
      </view>
    </view>

    <view class="content" v-else>
      <xh-empty />
    </view>
  </scroll-view>
</template>

<script>
import { pubEquipList } from "@/service/api/sp-equi";

export default {
  data() {
    return {
      params: { pageNum: 1, pageSize: 10 },
      list: [],
      hasNextPage: false,
    };
  },
  created() {
    this.fetchList();
  },
  methods: {
    async fetchList() {
      const res = await pubEquipList(this.params);
      if (res) {
        const { hasNextPage, list } = res;
        this.hasNextPage = hasNextPage;
        this.list = [...this.list, ...list];
      }
    },

    handleNextPage() {
      console.log("触底");
      if (!this.hasNextPage) return;
      this.params.pageNum += 1;
      this.fetchList();
    },
    jumpEquiEdit(val) {
      this.$Router.push({
        name: "equiEdit",
        params: {
          equipSn: val.equipSn,
          pubDomainShopId: val.pubDomainShopId,
        },
      });
    },
  },
};
</script>

<style>
page {
  background-color: #f9f9f9;
  padding: 20rpx;
  box-sizing: border-box;
}
</style>
<style lang="scss" scoped>
.container {
  height: 100vh;
  overflow: hidden;
  overflow-y: scroll;
  background-color: #f7f7f7;
}
.content {
  margin-top: 50%;
  transform: translateY(-50%);
}
.card {
  width: 686rpx;
  background-color: white;
  padding: 30rpx 26rpx;
  box-sizing: border-box;
  border-radius: 18rpx;
  //box-shadow: 0 0 10rpx #ccc;
  font-weight: bold;
  font-size: 29rpx;
  font-weight: bold;
  //margin-bottom: 19rpx;
  margin: 0 auto 19rpx auto;
  .top {
    display: flex;
    justify-content: space-between;
    .lef {
      .row {
        margin-bottom: 24rpx;
        color: #13131380;
      }
      .name {
        font-size: 36rpx;
        color: #131313;
      }
    }
    .rig {
      text-align: center;
      .img {
        width: 150rpx;
        height: 150rpx;
        overflow: hidden;
        border-radius: 8rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .btm {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #13131380;
    .time {
      flex: 3;
    }
    .set {
      flex: 1;
      text-align: center;
      color: #fdca69;
    }
  }
}
</style>
